import React, { Component } from 'react';
// 引入路由
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';

import Home from '../components/page/home'
import Page1 from '../components/page/page1'
import Page2 from '../components/page/page2'

import Nav1 from '../components/page/home/nav1'
import Nav2 from '../components/page/home/nav2'

import Test1 from '../components/hooks/test1';  // useState的使用
import Test2 from '../components/hooks/test2';  // useContext的使用
import Test3 from '../components/hooks/test3';  // useReducer的使用
import Test4 from '../components/hooks/test4';  // useEffect的使用
import Test5 from '../components/hooks/test5';  // useMemo useCallback的使用
import Test6 from '../components/hooks/test6';  // useRef的使用

// Router组件包裹整个视图
// Link实现路由调整
// Routes包裹Route组件的匹配规则
// exact属性表示精确匹配
// Route组件的属性变为element(之前版本是component),且需包裹在Routes里,element值为标签形式
// Navigate重定向组件
class RouterConfig extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }
    render() {
        return (
            <Router>
                <Routes>
                    <Route path='/' exact element={<Navigate to="/home"/>}/>

                    <Route path='/home' exact element={<Home/>}>
                        <Route path='/home/' exact element={<Nav1/>}/>
                        <Route path='/home/nav1' exact element={<Nav1/>}/>
                        <Route path='/home/nav2' element={<Nav2/>}/>
                    </Route>

                    <Route path='/page1' element={<Page1/>} />
                    <Route path='/page2' element={<Page2/>} />
                    <Route path='/test1' element={<Test1/>} />

                    <Route path='/test2' element={<Test2/>} />
                    <Route path='/test3' element={<Test3/>} />
                    <Route path='/test4' element={<Test4/>} />
                    <Route path='/test5' element={<Test5/>} />
                    <Route path='/test6' element={<Test6/>} />
                </Routes>
            </Router>
        );
    }
}

export default RouterConfig;